<template>
  <div class="header_box">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      :default-active="router.currentRoute.value.fullPath"
      router
    >
      <!-- <router-link to="/home"> -->
      <div class="elmu_left">
        <img class="el_menu_img" src="../assets/img/trou.png" alt />
        <!-- <el-menu-item index="0"> -->
        <span class="logo_btn">无忧行</span>
        <!-- </el-menu-item> -->
      </div>
      <!-- </router-link> -->
      <template v-if="router.currentRoute.value.fullPath=='/ScenerySpot'">
        <div class="search_box">
          <div class="search_box_item">
            <div>
              <el-button @click="show_tag" link class="search_box_btn1">
                <span>城市选择</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>&nbsp;
              </el-button>
            </div>
            <div class="inputBox">
              <input type="text" required v-model="serach_info_data" />
              <span>旅游信息</span>
            </div>
            <div>
              <el-button @click="serarch_btn_data" class="search_box_btn">
                <el-icon class="el-icon--left">
                  <Search />
                </el-icon>
                <span>景区查询</span>
              </el-button>
            </div>
          </div>
        </div>
      </template>
      <!-- <div class="flex-grow">
        dsadsa
      </div>-->
      <div class="el_menu_box">
        <template v-for="v in router.options.routes[2].children" :key="v.name">
          <el-menu-item :index="v.path" v-show="!v.meta.isShow" v-if="!v.children" :key="v.path">
            <span>{{ v.meta.title }}</span>
          </el-menu-item>
        </template>
      </div>
    </el-menu>
    <div class="head_righ">
      <div class="head_info">{{ login_user ? login_user : '未登录'}}</div>
      <div class="icons">
        <el-dropdown>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/login" @click="log_out" style="text-decoration: none;">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </router-link>
              <router-link to="/EditUser" style="text-decoration: none;">
                <el-dropdown-item>用户编辑</el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="城市选择"
      top="3vh"
      width="50%"
      destroy-on-close="true"
      center
    >
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Grid /></el-icon>
              <span>城市列表</span>
            </span>
          </template>
          <div v-for="item1,index in city_list" :key="item1" class="city_tag">
            <!-- {{ item1 }} -->
            <div>{{ Object.keys(city_list[index])[0] }}</div>
            <div v-for="item2 in item1" :key="item2">
              <div v-for="item3 in item2" :key="item2">
                <el-tag @click="select_city_tag(item3.name)">{{ item3.name }}</el-tag>
              </div>
            </div>
          </div>
          <!-- {{ city_list }} -->
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <el-icon>
                <calendar />
              </el-icon>
              <span>热门城市</span>
            </span>
          </template>
          <div
            v-for="item3,index in hot_city_list"
            class="host_tag"
            @click="select_city_tag(item3.label)"
            :key="item3"
          >
            <!-- {{ item1 }} -->
            <el-tag type="danger">{{ item3.label }}</el-tag>
            <!-- <div v-for="item2 in item1" :key="item2">{{ item2}}</div> -->
          </div>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <div class="dialog_footer_select">当前城市选择:{{ select_tag ? select_tag : '空' }}</div>
          <div class>
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="serarch_btn_data1">确定选择</el-button>
          </div>
        </span>
      </template>
    </el-dialog>
    <!-- </header> -->
  </div>
</template>

<script setup lang="ts">
let character_list = ["A"];
let select_tag = ref("");
import { getCity, getHotCityName } from "@/request/cityserves";
const centerDialogVisible = ref(false);
const router = useRouter();
import { removestrange } from "@/Hook/removestrong.ts";
import { storeToRefs } from "pinia";
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
let {
  search_data,
  login_user,
  city_select_list,
  hot_city_select_list,
  city_select_tag,
} = storeToRefs(menulist);
let serach_info_data = ref("");
let city_list = ref([]);
let hot_city_list = ref([]);
const log_out = () => {
  removestrange();
};
const serarch_btn_data = () => {
  // removestrange();
  menulist.search_status = true;
};
const show_tag = () => {
  // console.log("menulist",menulist.city_select_tag);
  select_tag.value = ''
  // removestrange();
  centerDialogVisible.value = true
};

const serarch_btn_data1 = () => {
  if (select_tag.value == "") {
    ElMessage({
      message: "请选择城市",
      type: "warning"
    });
  }else{
    serach_info_data.value = select_tag.value
    centerDialogVisible.value = false;
  menulist.city_select_tag = true;

  }
  // menulist.search_status=true
};
const select_city_tag = (item: ang) => {
  console.log(item);
  select_tag.value = item;
  // removestrange();
  // centerDialogVisible.value = true;
  // menulist.search_status=true
};
const getCity_list = async () => {
  if (!city_select_list.value) {
    let { data } = await getCity();
    menulist.city_select_list = data;
    city_list.value = data;
  } else {
    city_list.value = city_select_list.value;
  }
  console.log(Object.keys(city_list.value[0]));
};
const getHotCity_list = async () => {
  if (!hot_city_select_list.value) {
    let { data } = await getHotCityName();
    menulist.hot_city_select_list = data;
    hot_city_list.value = data;
  } else {
    hot_city_list.value = hot_city_select_list.value;
  }
};
watch(serach_info_data, (newVal, oldVal) => {
  // console.log("name变化了：", newVal, oldVal);
  menulist.search_data = newVal;
});
onMounted(() => {
  getCity_list();
  getHotCity_list();
  // console.log(router.options.routes[2]);
  // console.log(router.currentRoute.value.fullPath);
  menulist.search_data = "";
  menulist.search_status = false;
  menulist.city_select_tag = false;
});
</script>

<style lang="scss" scoped>
.header_box {
  width: 100%;
  display: flex;
  text-decoration: none;
  color: #000;
  // background-color: #040611;
}
.el-menu-demo {
  // background-color: aquamarine;
  // display: flex;
  width: 90%;
  // display: flex;
  // flex-direction: row;
  // list-style: none;

  text-decoration: none !important;
}
.elmu_left {
  // list-style: none;
  height: 100%;
  width: 150px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  // text-align: center;
  // background-color: rgb(135, 173, 173);
  padding-left: 10px;
  // text-decoration: none;
  padding-top: 10px;
  .el_menu_img {
    width: 40px;
    height: 40px;
  }
  .logo_btn {
    padding-top: 5px;
    font-size: 30px;
    // list-style: none;
    color: rgb(0, 0, 0);
    font-weight: 900;
    font-family: "楷体";
    // text-decoration: none;
    margin: 0 auto;
  }
}
.search_box {
  padding-top: 3px;
  width: 40%;
  // background-color: aquamarine;

  flex-grow: 2;
  // .el-button {
    //   height: 100% !important;
    // }
    .search_box_item {
      width: 40%;
      display: flex;
      flex-direction: row;
      // background-color: aquamarine;
      justify-content: space-between;
      margin: 0 auto;
      .search_box_btn {
        font-size: 15px;
        height: 100% !important;
      }
      .search_box_btn1 {
        font-size: 15px;
        color: #040611;
        height: 100% !important;
      }
  }
}
.el_menu_box {
  // background-color: aqua;
  display: flex;
}
:deep(.el-menu-item) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  // text-align: center;
  width: 100px;
  // padding: 0;
}
.head_righ {
  float: right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background-color: aqua;
  padding-top: 10px;
  padding-left: 10px;
  width: 120px;
  .head_info {
    // color: beige;
    margin-top: 10px;
  }
}

.inputBox {
  // margin: 20px 0;
  position: relative;
  font-size: 20px;
  .arrow_btn {
    width: 30px !important;
  }
}
:deep(.el-select--large) {
  width: 150px !important;
}

.inputBox input {
  /* position: absolute; */
  height: 2em;
  padding: 5px 10px;
  background-color: transparent;
  border-radius: 5px;
  color: #110404;
  border: 1px solid rgb(31, 191, 202);
  font-size: 1em;
}

.inputBox span {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0 10px;
  // background-color: rgb(1, 39, 39);
  transition: 0.5s;
  color: rgba(255, 255, 255, 0.575);
  color: rgb(18, 22, 22);
}

.inputBox input:valid + span,
.inputBox input:focus + span {
  /* top: -10px; */
  // font-size: 10px;
  color: rgb(255, 0, 0);
  // background-image: linear-gradient(25deg, #0c3939, #1a5c3b, #21813b, #20a836);

  border-left: 1px solid rgb(255, 0, 0);
  border-right: 1px solid rgb(255, 0, 0);
  // letter-spacing: .2em;
  transform: translatex(-205px);
  // font-size: .5em;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.host_tag {
  width: 80px;
  cursor: pointer;
  // display: flex;
  // flex-direction: row;
}
:deep(.el-tabs) {
  width: 100%;
  // background-color: #110404;
  // display: flex;
  // flex-direction: row;
}
:deep(.el-tabs__content) {
  display: flex;
  flex-direction: row;
  padding: 0px;
}
:deep(.el-tab-pane) {
  padding: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  // background-color: #6b778c;
  justify-content: space-around;
}
.city_tag {
  gap: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  .el-tag {
    margin-bottom: 5px;
    cursor: pointer;
  }
}
.dialog-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .dialog_footer_select {
    font-size: 20px;
  }
}
</style>